<template>
  <div>
    <div>
      <div class="att_top">
        <div>
          <div>未处理</div>
          <div>0</div>
        </div>
        <div>
          <el-button type="primary" @click="drawerFlag=true">打开范围</el-button>
          <el-button>设置</el-button>
        </div>
      </div>
      <!-- 部门 -->
      <div class="depart">
        部门：
        <el-checbox-group v-model="deptID" @change="changeDep">
          <el-checkbox v-for="item in departList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
        </el-checbox-group>
      </div>
      <!-- 表格部门 -->
      <el-table :data="attList">
        <el-table-column label="序号" type="index" />
        <el-table-column label="员工" prop="username" />
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="手机" prop="mobile" />
        <el-table-column v-for="(item,index) in attList[0].attendanceRecord" :key="item.id" :label="item.daylabel">
          <template #default="{row}">
            <div @click="toOpenAttend(row,row.attendanceRecord[index].adtStatu,row.attendanceRecord[index].day)">

              <span v-if="row.attendanceRecord[index].adtStatu===1">√</span>
              <span v-if="row.attendanceRecord[index].adtStatu===2">旷工</span>
              <span v-if="row.attendanceRecord[index].adtStatu===3">迟到</span>
              <span v-if="row.attendanceRecord[index].adtStatu===4">早退</span>
              <span v-if="row.attendanceRecord[index].adtStatu===5">外出</span>
              <span v-if="row.attendanceRecord[index].adtStatu===6" style="background: red;">出差</span>
              <span v-if="row.attendanceRecord[index].adtStatu===7">年假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===8">事假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===9">病假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===10">婚假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===11">丧假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===12">产假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===13">奖励产假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===14">陪产假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===15">探亲假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===16">工伤假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===17">调休</span>
              <span v-if="row.attendanceRecord[index].adtStatu===18">产检假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===19">流产假2</span>
              <span v-if="row.attendanceRecord[index].adtStatu===20">长期病假</span>
              <span v-if="row.attendanceRecord[index].adtStatu===21">测试架</span>
              <span v-if="row.attendanceRecord[index].adtStatu===22">补签</span>

            </div></template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 20px">
        <el-pagination layout="prev, pager, next" :total="total" :page-size="pagesize" />
      </div>
    </div>
    <!-- 地图组件 修改打卡范围 -->
    <el-drawer
      title="打卡范围设置"
      :visible.sync="drawerFlag"
      direction="ttb"
      size="100%"
    >
      <attendMap @closeDrawer="closeDrawer" />
    </el-drawer>
    <!-- 修改的考勤状态的弹出层 -->
    <el-dialog :title="nowTitle" width="50%" :visible.sync="atteFlag">
      <div>
        <h3 style="color:red;">注:统计考勤时，异常状态优先正常状态</h3>
        <div>
          <el-radio-group v-model="editAtteForm.adtStatu">
            <el-radio v-for="(item,index) in editAtteList" :key="index" :label="Object.keys(item)[0]">{{ Object.values(item)[0] }}</el-radio>
          </el-radio-group>
        </div>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="toEditAtte">确定</el-button>
        <el-button type="primary" @click="atteFlag=false">取消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { getDepartment } from '@/api/department'
import { getAttendanceList, getAttendanceCurrent, AttendanceCurrentUpdate } from '@/api/attendance'
import attendMap from './child/attendMap.vue'

export default {
  components: { attendMap },
  data() {
    return {
      atteFlag: false, // 控制考勤状态弹出层
      title: '6/1',
      departList: [], // 部门列表
      page: 1,
      pagesize: 5,
      deptID: [], // 部门晒选
      editAtteList: [], // 可修改的考勤状态
      attendanceList: [], // 考勤列表
      total: 0, // 总条数
      drawerFlag: false, // 地图抽屉
      editAtteForm: { // 修改当前考勤的数据
        adtStatu: 99, // 考勤状态码
        day: '', // 当前日期
        departmentId: 1, // 部门id
        userId: 1 // 用户id
      }
    }
  },
  computed: {

    attList() {
      const arr = this.attendanceList.map(item => {
        return {
          ...item,
          attendanceRecord: item.attendanceRecord.map(item => {
            const fir = item.day.slice(4, 6) > 10 ? item.day.slice(4, 6) : item.day.slice(5, 6)
            const two = item.day.slice(6) > 10 ? item.day.slice(6) : item.day.slice(7)
            let str = fir + '/' + two // 2025  0601
            // 2025-06-01
            const day = new Date(Number(item.day.slice(0, 4)), Number(item.day.slice(4, 6)) - 1, Number(item.day.slice(6))).getDay()
            console.log(day, '---------') // 获取星期
            if (day === 0) {
              str += '(日)'
            }
            if (day === 6) {
              str += '(六)'
            }
            return {
              ...item,
              daylabel: str // 处理好的日期
            }
          })
        }
      })
      return arr
    }
  },
  created() {
    this.getDepart()
    this.getAttendance()
  },
  methods: {
    async toEditAtte() { // 修改当前员工考勤
      const res = await AttendanceCurrentUpdate(this.editAtteForm)
      console.log(res, '修改当前员工考勤')
      this.atteFlag = false
      this.getAttendance()
      this.editAtteForm.adtStatu = 99
      this.editAtteForm.day = ''
      this.editAtteForm.departmentId = 1
      this.editAtteForm.userId = 0
    },
    async toOpenAttend(row, sta, day) { // 打开弹出层
      if (sta !== 99) {
        this.atteFlag = true
        const res = await getAttendanceCurrent(row.id)
        this.editAtteList = res.data
        console.log(res, '获取可以修改的考勤')
        this.editAtteForm.adtStatu = sta // 考勤状态
        this.editAtteForm.day = day
        this.editAtteForm.departmentId = row.departmentId
        this.editAtteForm.userId = row.id
      }
    },
    closeDrawer() {
      this.drawerFlag = false
    },
    async getDepart() { // 获取部门
      const res = await getDepartment()
      console.log(res, '-------部门数据')
      this.departList = res.data
    },
    changeDep(val) {
      console.log(this.deptID, 'c收集的值')

      this.getAttendance()
    },
    async getAttendance() { // 获取考勤列表
      console.log(this.deptID, '----------部门id')
      const res = await getAttendanceList({
        page: this.page,
        pagesize: this.pagesize,
        deptID: '' + this.deptID// 部门id集合
      })
      console.log(res, '-------考勤列表')
      this.attendanceList = res.data.data.rows
      this.total = res.data.data.total
    }
  }
}
</script>
<style lang="scss">
  .att_top{
    padding: 20px 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
  .depart{
    padding: 20px 50px;
    box-sizing: border-box;
  }
</style>
